<template>
  <div
    role="presentation"
    :class="question.getRadioItemClass(question.cssClasses, value)"
  >
    <label :class="question.cssClasses.radioLabel">
      <input
        type="radio"
        :name="question.name"
        :value="value"
        :checked="value === question.value"
        :aria-errormessage="question.ariaErrormessage"
        :disabled="question.isDisabledAttr"
        :readonly="question.isReadOnlyAttr"
        :class="question.cssClasses.itemRadioControl"
        @change="handleChange"
      />
      <span
        v-if="question.cssClasses.materialRadioDecorator"
        :class="question.cssClasses.materialRadioDecorator"
      >
        <svg
          v-if="question.itemSvgIcon"
          :class="question.cssClasses.itemRadioDecorator"
        >
          <use :xlink:href="question.itemSvgIcon"></use>
        </svg>
      </span>
      <span :class="question.cssClasses.radioControlLabel">
        <SvComponent :is="'survey-string'" :locString="locText" />
      </span>
    </label>
  </div>
</template>

<script lang="ts" setup>
import SvComponent from "@/SvComponent.vue";
import type { LocalizableString, QuestionBooleanModel } from "survey-core";

const props = defineProps<{
  question: QuestionBooleanModel;
  locText: LocalizableString;
  value: string | boolean;
}>();
const handleChange = () => {
  const question = props.question;
  question.value = props.value;
};
</script>
